const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpackbar = require("webpackbar");

const devMode = process.env.NODE_ENV !== "production";
module.exports = {
  entry: {
    app: "./src/index.tsx",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
      inject: "body",
      hash: true,
      title: "React TS",
      filename: "index.html",
      minify: {
        removeComments: true,
      },
    }),
    new CleanWebpackPlugin(),
    new webpackbar({
      name: devMode ? "启动中" : "打包中",
      color: "#b500ff",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(less)$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              name: "[name]-[hash:5].[ext]",
              outputPath: "img/",
            },
          },
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: "65-90",
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              // 文件大小小于limit参数，url-loader将会把文件转为DataUR
              limit: 10000,
              name: "[name]-[hash:5].[ext]",
              ourput: "fonts/",
            },
          },
        ],
      },
      {
        test: /\.(ts|js)x?$/,
        use: [
          {
            loader: "thread-loader",
            options: {
              workers: 2,
            },
          },
          "babel-loader",
        ],
        exclude: /node-modules/,
      },
    ],
  },
};
